import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

import { getlist } from '@/api/http';

import { CuifengjCss } from '../style';

@withRouter
class Cuifengj extends Component {

    state={
        list:[]
    }
    componentDidMount(){
        getlist(this.props.index).then(e=>{
            this.setState({
                list:e.data.data.list
            })
        })
    }
    xiangq(id) {
        this.props.history.push('/xiangqing/'+id)
    }

    render() {
        let list = this.state.list
        let pic = this.props.pic
        return (
            <CuifengjCss>
                <div className='pic_box'>
                <img src={pic ? pic : '	http://www.qfedu.com/images/new_logo.png'} alt="" />
                </div>
                <div className='sp_list'>
                    <div className='box'>
                        {
                            list
                                ?
                                list.map(e => (
                                    <div key={e.product.id} className='sp_box'>
                                        <div className='pic_box' onClick={() => this.xiangq(e.product.productSn)}>
                                            <img src={e.product.pic} alt="" />
                                        </div>
                                        <div className='name_box'>
                                            <p>{e.product.name}</p>
                                            <p className='sp_price' >￥ {e.product.price}</p>
                                        </div>
                                    </div>
                                ))
                                :
                                <div>
                                    无数据....
                                </div>
                        }
                        <div className='sp_box' style={{background:"#f7f7f7",display:'flex',alignItems:'center'}}>
                            <div className='pic_box' onClick={() => this.props.qh('fenlei')}>
                                <img className='gduo' width='114px' height="250px"  src='https://pic.flyco.net.cn/mall/cms/home/shavers/shavers_more.png' alt="" />
                            </div>
                        </div>
                    </div>
                </div>
            </CuifengjCss>
        );
    }
}

export default Cuifengj;
